const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin}=require("clean-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    entry:path.join(__dirname,'src/main.js'),
    output:{
        filename:"bundle.js",
        path:path.join(__dirname,"dist")
    },
    module:{
        rules:[
            {
                test:/\.css$/,use:['style-loader','css-loader']
            },
            {test:/\.(gif|jpg|png|svg|jpeg)$/,
            use:[
                {
                    loader:'url-loader',
                    options:{
                        limit:1024
                    }
                }
            ]},
            {
                test: /\.vue$/,
                loader: 'vue-loader'
              }
        ]
    },
    plugins:[new HtmlWebpackPlugin({
        template:path.join(__dirname,'pubilc/index.html')
    }),
    new VueLoaderPlugin()
],
    
    mode:"development",
    devServer:{
        static:{
            directory:path.join(__dirname,'pulic'),
        },
        port:8080,
        compress:true,
        client:{
            overlay:{
                errors:true,
                warnings:false
            }
        }
    },
    devtool:"inline-source-map"
}